<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>字体栈（集） | 基础</title>
	<link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		body {padding: 0; margin: 0;}
		label {-webkit-user-select: none; -ms-user-select: none; user-select: none;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>字体栈（集）</dd>
			<dt>描述：</dt>
			<dd>在字体选用上，优先使用现代字体，注重平台兼容性好、显示清晰和阅读辨识度高。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_font.css</code>
			</dd>
		</dl>
	</div>

	<div class="mainbox" id="mainBox">
		<label><input type="checkbox" id="ft_bold">加粗</label>
		<label style="margin-left:10px"><input type="checkbox" id="ft_italic">倾斜</label>
		<hr>

		<div style="font-size:12px">
			<p>床前明月光，疑是地上霜</p>
			<p>The quick brown fox jumps over the lazy dog.</p>
			<p>1234567890</p>
		</div>

		<hr>

		<div style="font-size:14px">
			<p>床前明月光，疑是地上霜</p>
			<p>The quick brown fox jumps over the lazy dog.</p>
			<p>1234567890</p>
		</div>

		<hr>

		<div style="font-size:20px">
			<p>床前明月光，疑是地上霜</p>
			<p>The quick brown fox jumps over the lazy dog.</p>
			<p>1234567890</p>
		</div>

		<hr>

		<div style="font-size:28px">
			<p>床前明月光，疑是地上霜</p>
			<p>The quick brown fox jumps over the lazy dog.</p>
			<p>1234567890</p>
		</div>
	</div>

	<script>
		var divs = document.getElementById('mainBox').querySelectorAll('div');

		var setFontWeight = function(type, val) {
			for (var i = 0; i < divs.length; i++) {
				divs[i].style[type] = val;
			}
		};

		document.getElementById('ft_bold').onclick = function() {
			if (this.checked) {
				setFontWeight('fontWeight', 'bold');
			} else {
				setFontWeight('fontWeight', 'normal');
			}
		}

		document.getElementById('ft_italic').onclick = function() {
			if (this.checked) {
				setFontWeight('fontStyle', 'italic');
			} else {
				setFontWeight('fontStyle', 'normal');
			}
		}

	</script>
</body>
</html>
